<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.*" %>
<%@ page import="com.example.model.Book" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图书详情 - 应急防护小站</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body class="bg-gray-50 min-h-screen text-gray-900">
    <!-- 顶部导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-40">
        <div class="max-w-7xl mx-auto flex items-center justify-between px-4 h-16">
            <div class="flex items-center space-x-2">
                <i class="fa-solid fa-shield-alt text-green-600 text-2xl"></i>
                <span class="text-xl font-bold">应急防护小站</span>
            </div>
            <div class="flex items-center space-x-2">
                <a href="index.jsp" class="px-4 py-2<%=(request.getRequestURI().endsWith("index.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-house mr-1"></i>首页</a>
                <a href="quiz" class="px-4 py-2<%=(request.getRequestURI().endsWith("quiz.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-question-circle mr-1"></i>答题功能</a>
                <a href="/books" class="px-4 py-2<%=(request.getRequestURI().endsWith("books.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-cart-shopping mr-1"></i>图书购买</a>
                <a href="user-profile" class="px-4 py-2<%=(request.getRequestURI().endsWith("user-profile.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-user mr-1"></i>个人信息</a>
                <a href="submit-article" class="px-4 py-2<%=(request.getRequestURI().endsWith("submit-article.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-pen-to-square mr-1"></i>我要投稿</a>
                <a href="feedback" class="px-4 py-2<%=(request.getRequestURI().endsWith("feedback.jsp") ? " text-green-600 border-b-2 border-green-600 font-medium" : " hover:text-green-600")%>" ><i class="fa-solid fa-comment-dots mr-1"></i>问题反馈</a>
            </div>
        </div>
    </nav>
    <main class="max-w-5xl mx-auto px-4 py-10">
        <c:choose>
            <c:when test="${not empty book}">
                <div class="bg-white rounded-2xl shadow-lg p-8 flex flex-col md:flex-row gap-8">
                    <!-- 封面 -->
                    <div class="flex-shrink-0">
                        <c:if test="${not empty book.coverUrl}">
                            <div class="flex justify-center mb-8">
                                <img src="${book.coverUrl}" alt="${book.name}" class="h-64 object-contain rounded shadow" onerror="this.onerror=null;this.src='https://img1.baidu.com/it/u=1812345678,1234567890&fm=253&fmt=auto&app=138&f=JPEG?w=200&h=300'"/>
                            </div>
                        </c:if>
                    </div>
                    <!-- 详情 -->
                    <div class="flex-1">
                        <h2 class="text-2xl font-bold mb-2">${book.name}</h2>
                        <div class="text-gray-600 mb-2">作者：${book.author}</div>
                        <div class="text-gray-600 mb-2">价格：￥${book.price}</div>
                        <div class="text-gray-600 mb-2">库存：${book.stock}</div>
                        <div class="text-gray-600 mb-2">分类：${book.category}</div>
                        <div class="text-gray-600 mb-2">出版社：${book.publisher}</div>
                        <div class="text-gray-600 mb-2">简介：${book.description}</div>
                        <div class="flex justify-center mt-8">
                            <form action="cart" method="post">
                                <input type="hidden" name="action" value="add">
                                <input type="hidden" name="book_id" value="${book.id}">
                                <button type="submit" class="bg-orange-600 hover:bg-orange-700 text-white px-8 py-3 rounded-lg font-bold text-lg transition duration-200 flex items-center">
                                    <i class="fa-solid fa-cart-plus mr-2"></i> 加入购物车
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
                
                <!-- 图书详细信息标签页 -->
                <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
                    <div class="flex border-b border-gray-200 mb-6">
                        <button class="px-4 py-2 border-b-2 border-orange-600 font-medium">图书详情</button>
                        <button class="px-4 py-2 text-gray-500 hover:text-orange-600">相关推荐</button>
                        <button class="px-4 py-2 text-gray-500 hover:text-orange-600">读者评价</button>
                    </div>
                    
                    <!-- 图书详情内容 -->
                    <div class="space-y-6">
                        <div>
                            <h3 class="text-lg font-bold mb-3">图书特色</h3>
                            <ul class="space-y-2">
                                <li class="flex items-center"><i class="fa-solid fa-check text-green-500 mr-2"></i>专业防护知识，实用性强</li>
                                <li class="flex items-center"><i class="fa-solid fa-check text-green-500 mr-2"></i>图文并茂，易于理解</li>
                                <li class="flex items-center"><i class="fa-solid fa-check text-green-500 mr-2"></i>适合各年龄段读者</li>
                                <li class="flex items-center"><i class="fa-solid fa-check text-green-500 mr-2"></i>应急情况下的实用指南</li>
                            </ul>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-3">适用人群</h3>
                            <div class="flex flex-wrap gap-2">
                                <span class="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">家庭用户</span>
                                <span class="bg-green-100 text-green-700 px-3 py-1 rounded-full text-sm">学校师生</span>
                                <span class="bg-purple-100 text-purple-700 px-3 py-1 rounded-full text-sm">企业员工</span>
                                <span class="bg-orange-100 text-orange-700 px-3 py-1 rounded-full text-sm">社区工作者</span>
                            </div>
                        </div>
                        
                        <div>
                            <h3 class="text-lg font-bold mb-3">图书规格</h3>
                            <div class="grid grid-cols-2">
                                <div><span class="font-medium">开本：</span>16开</div>
                                <div><span class="font-medium">页数：</span>200页</div>
                                <div><span class="font-medium">纸张：</span>铜版纸</div>
                                <div><span class="font-medium">装帧：</span>平装</div>
                                <div><span class="font-medium">出版日期：</span>2025年1月</div>
                                <div><span class="font-medium">ISBN：</span>9787123456789</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 读者评价 -->
                <div class="mt-8 bg-white rounded-xl shadow-lg p-6">
                    <h3 class="text-xl font-bold mb-6 flex items-center">
                        <i class="fa-solid fa-star text-yellow-400 mr-2"></i>读者评价
                    </h3>
                    
                    <div class="space-y-4">
                        <div class="border-b border-gray-200 pb-4">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center">
                                    <i class="fa-solid fa-user-circle text-gray-400 text-2xl mr-3"></i>
                                    <div>
                                        <div class="font-semibold">张先生</div>
                                        <div class="flex text-yellow-400 text-sm">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-sm text-gray-500">2025-01-15</div>
                            </div>
                            <p class="text-gray-700">这本书内容很实用，图文并茂，非常适合家庭应急防护学习。推荐购买！</p>
                        </div>
                        
                        <div class="border-b border-gray-200 pb-4">
                            <div class="flex items-center justify-between mb-2">
                                <div class="flex items-center">
                                    <i class="fa-solid fa-user-circle text-gray-400 text-2xl mr-3"></i>
                                    <div>
                                        <div class="font-semibold">李女士</div>
                                        <div class="flex text-yellow-400 text-sm">
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-solid fa-star"></i>
                                            <i class="fa-regular fa-star"></i>
                                        </div>
                                    </div>
                                </div>
                                <div class="text-sm text-gray-500">2025-01-10</div>
                            </div>
                            <p class="text-gray-700">为学校老师，这本书很适合用于安全教育课程，学生也很喜欢。</p>
                        </div>
                        
                        <div class="text-center">
                            <button class="text-orange-600 hover:text-orange-700">查看更多评价 <i class="fa-solid fa-chevron-down ml-1"></i></button>
                        </div>
                    </div>
                </div>
            </c:when>
            <c:otherwise>
                <div class="text-center text-gray-400 py-32 text-xl">未找到该图书信息</div>
            </c:otherwise>
        </c:choose>
    </main>
    <!-- 底部信息区 -->
    <footer class="bg-gray-900 text-white py-10 mt-16">
        <div class="max-w-7xl mx-auto px-4">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
                <div>
                    <div class="flex items-center space-x-2 mb-4">
                        <i class="fa-solid fa-shield-alt text-orange-400 text-2xl"></i>
                        <span class="text-xl font-bold">应急防护小站</span>
                    </div>
                    <p class="text-gray-400 text-sm mb-4">守护生命安全</p>
                    <div class="flex space-x-4">
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weibo"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-weixin"></i></a>
                        <a href="#" class="text-gray-400 hover:text-white"><i class="fa-brands fa-twitter"></i></a>
                    </div>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">防护分类</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="disaster-earthquake.jsp" class="hover:text-white">地震防护</a></li>
                        <li><a href="disaster-fire.jsp" class="hover:text-white">火灾防护</a></li>
                        <li><a href="disaster-typhoon.jsp" class="hover:text-white">台风防护</a></li>
                        <li><a href="disaster-flood.jsp" class="hover:text-white">洪水防护</a></li>
                        <li><a href="disaster-extremeheat.jsp" class="hover:text-white">极端天气</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">快速链接</h3>
                    <ul class="space-y-2 text-gray-400">
                        <li><a href="#about" class="hover:text-white">关于我们</a></li>
                        <li><a href="submit-article.jsp" class="hover:text-white">我要投稿</a></li>
                        <li><a href="books" class="hover:text-white">防护用品</a></li>
                        <li><a href="feedback.jsp" class="hover:text-white">问题反馈</a></li>
                        <li><a href="#" class="hover:text-white">隐私政策</a></li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-lg font-medium mb-4">订阅我们</h3>
                    <p class="text-gray-400 text-sm mb-4">订阅我们的防护周刊，获取最新应急资讯</p>
                    <div class="flex">
                        <input type="email" placeholder="输入您的邮箱" class="px-4 py-2 rounded-l-lg w-full focus:outline-none focus:ring-2 focus:ring-orange-400">
                        <button class="bg-orange-600 hover:bg-orange-700 text-white px-4 rounded-r-lg"><i class="fa-solid fa-paper-plane"></i></button>
                    </div>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>&copy; 2025 应急防护小站. 保留所有权利.</p>
            </div>
        </div>
    </footer>
    <script>
        // 登录判断，未登录跳转到登录页
        function checkLogin(url) {
            var isLogin = '<%= session.getAttribute("user") != null ? "true" : "false" %>';
            if (isLogin === 'false') {
                window.location.href = 'login.jsp';
            } else {
                window.location.href = url;
            }
            return false;
        }
    </script>
</body>
</html> 